<template>
    <el-dialog v-model="signalsRadio1.derive" title="导出内容" width="1100" :before-close="handleClose">
        <div class="dialogBig">
            <div class="dialogBox">
                <div class="dialogcont" v-for="item in dialaLiss " :key="item.id"
                    :class="{ dialactive: dial == item.id }" @click="dialactiveClick(item)">
                    <div class="dialogtitle">
                        <img style="width: 18px; height: 16px; margin-right: 5px;" :src="item.url" alt="">
                        <span class="dialogSize">{{ item.title }}</span>
                    </div>
                    <div class="dialogxinx">
                        <div class="glory" v-for="ele in item.marr" :key="ele">
                            <div style="display: flex;">
                                <span class="glorybt">{{ ele.name }}</span>
                                <span class="glorynr" v-for=" des in ele.marrs" :key="des">{{ des.names }}</span>
                                <!-- <span class="glorynr">搜索词/订阅词.....</span> -->
                            </div>
                            <div v-if="ele.flg" style="color: #6675FF; font-size: 12px;">展开>></div>
                        </div>
                        <!-- <div class="glory">
                            <div style="display: flex;">
                                <span class="glorybt">招标公司信息</span>
                                <span class="glorynr">招标公司名称</span>
                                <span class="glorynr">招标公司类型</span>
                            </div>
                        </div>
                        <div class="glory">
                            <div style="display: flex;">
                                <span class="glorybt">中标公司信息</span>
                                <span class="glorynr">中标公司名称</span>
                            </div>
                        </div>
                        <div class="glory">
                            <div style="display: flex;">
                                <span class="glorybt">招标代理公司信息</span>
                                <span class="glorynr">招标代理公司名称</span>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="dialogShuju">
                <div class="dialogdc">导出数量</div>
                <div>
                    <el-input-number v-model="num" class="mx-4" controls-position="right" @change="handleChange" />
                    <span class="prompt0">条</span> <span class="prompt1">支持导出最大上限是{{ max_num }}条</span>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button class="dialogbutton" type="primary" :loading-icon="Eleme" :loading="logflg"
                    @click="derivation">导出</el-button>
            </div>
            <el-progress :percentage="percentage" :stroke-width="6" striped />
            <!-- <el-button :icon="Minus" @click="decrease" />
            <el-button :icon="Plus" @click="increase" /> -->
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Eleme } from '@element-plus/icons-vue'
import { userInfo } from '@/Api/api.js'
import { Dataexportbx, Datallocation, allocation } from "@/Api/shoop/index";
import { downloadFileByBase64 } from '@/utils/daochu/index'
import { useRadio1Store } from "@/pain/search/search";
import { decrypt } from "@/utils/index";
import Papa from 'papaparse'
const signalsRadio1 = useRadio1Store();
const percentage = ref(0)
const duration = Math.floor(percentage.value / 10)
let dial = ref('2')
let dialaIndex = ref('2')
let logflg = ref(false)
// const itemList = {
// 	"code": 1,
// 	"msg": "操作成功",
// 	"time": "1713249652",
// 	"data": {
// 		"list": {
// 			"filed": [
// 				"公告类型",
// 				"公告标题",
// 				"发布时间",
// 				"省",
// 				"金额(元)",
// 				"标书获取截止时间",
// 				"投标截止时间",
// 				"招标公司名称",
// 				"中标公司名称",
// 				"招标代理公司名称",
// 				"链接"
// 			],
// 			"data": 
// 		},
// 		"scroll_id": "FGluY2x1ZGVfY29udGV4dF91dWlkDXF1ZXJ5QW5kRmV0Y2gBFnRFb0ZlbTB4VDhhT3dsYlpjelJWSVEAAAAAAAC4sxZmdmlMTWg4R1E3LVdMdmlkRFMwa2Z3"
// 	}
// }
const lists = [
    [
        "公告类型",
        "公告标题",
        "发布时间",
        "省",
        "金额(元)",
        "标书获取截止时间",
        "投标截止时间",
        "招标公司名称",
        "中标公司名称",
        "招标代理公司名称",
        "链接"
    ],
    [
        "中标公告",
        "人工智能小镇展厅视频制作项目代理服务中标结果公告",
        "2024-04-16",
        "浙江省",
        "50000",
        "",
        "",
        "杭州未来科技城产业发展有限公司",
        "建经投资咨询有限公司",
        "",
        "http://www.6ocbx.com/searchInfo?id=439991328"
    ],
    [
        "中标公告",
        "盐城现代产业学院人工智能实训室项目",
        "2024-04-15",
        "江苏省",
        "0",
        "",
        "",
        "盐城现代产业学院",
        "",
        "",
        "http://www.6ocbx.com/searchInfo?id=439971968"
    ],
    [
        "中标公告",
        "[WXHS202312002-X02]人工智能及机器人制造项目一、二期监理（31f8b9）",
        "2024-04-15",
        "江苏省",
        "3087000",
        "",
        "",
        "无锡市惠前投资管理有限公司",
        "江苏省华厦工程项目管理有限公司",
        "",
        "http://www.6ocbx.com/searchInfo?id=439971969"
    ]
]
const exportCsv = (event) => {
    // itemList.data.data.forEach(item =>{

    var csv = Papa.unparse(event);
    //定义文件内容，类型必须为Blob 否则createObjectURL会报错
    let content = new Blob([csv]);
    //生成url对象
    let urlObject = window.URL || window.webkitURL || window;
    let url = urlObject.createObjectURL(content);
    //生成<a></a>DOM元素
    let el = document.createElement("a");
    //链接赋值
    el.href = url;
    el.download = "文件导出.csv";
    //必须点击否则不会下载
    el.click();
    //移除链接释放资源
    urlObject.revokeObjectURL(url);

    // })
};
let dialaLiss = [
    {
        id: '2',
        title: '标准会员字段',
        url: new URL('../../../../assets/img/bzhy.png', import.meta.url).href,
        marr: [
            // {
            //     name: '基本信息',
            //     marrs: [
            //         {
            //             names: '公告类型'
            //         },
            //         {
            //             names: '公告标题'
            //         },
            //         {
            //             names: '发布时间...'
            //         }
            //     ],
            //     flg: false
            // },
            {
                name: '公告类型',
            },
            {
                name: '公告标题',
            },
            {
                name: '发布时间',
            },
            {
                name: '省',
            },
            {
                name: '金额',
            },
            {
                name: '标书获取截止时间',
            },
            {
                name: '投标截止时间',
            },
            {
                name: '招标公司名称',
            },
            {
                name: '中标公司名称',
            },
            {
                name: '招标代理公司名称',
            }
        ]
    },
    {
        id: '3',
        title: '高级会员字段',
        url: new URL(`../../../../assets/img/gjhy.png`, import.meta.url).href,
        marr: [
            // {
            //     name: '基本信息',
            //     marrs: [
            //         {
            //             names: '公告类型'
            //         },
            //         {
            //             names: '公告标题'
            //         },
            //         {
            //             names: '发布时间...'
            //         }
            //     ],
            //     flg: false
            // },
            {
                name: '公告类型',
            },
            {
                name: '公告标题',
            },
            {
                name: '发布时间',
            },
            {
                name: '省',
            },
            {
                name: '金额',
            },
            {
                name: '标书获取截止时间',
            },
            {
                name: '投标截止时间',
            },
            {
                name: '招标公司名称',
            },
            {
                name: '中标公司名称',
            },
            {
                name: '招标代理公司名称',
            },


            {
                name: '搜索词/订阅词',
            },
            {
                name: '项目编号',
            },
            {
                name: '招标联系人名称',
            },
            {
                name: '招标联系人电话',
            },
            {
                name: '中标联系人姓名',
            },
            {
                name: '中标联系人电话',
            },
            {
                name: '招标代理联系人姓名',
            },
            {
                name: '招标代理联系人电话',
            },
        ]
    },
    {
        id: '4',
        title: 'VIP会员字段',
        url: new URL(`../../../../assets/img/Viphy.png`, import.meta.url).href,
        marr: [
            // {
            //     name: '基本信息',
            //     marrs: [
            //         {
            //             names: '公告类型'
            //         },
            //         {
            //             names: '公告标题'
            //         },
            //         {
            //             names: '发布时间...'
            //         }
            //     ],
            //     flg: false
            // },
            {
                name: '公告类型',
            },
            {
                name: '公告标题',
            },
            {
                name: '发布时间',
            },
            {
                name: '省',
            },
            {
                name: '金额',
            },
            {
                name: '标书获取截止时间',
            },
            {
                name: '投标截止时间',
            },
            {
                name: '招标公司名称',
            },
            {
                name: '中标公司名称',
            },
            {
                name: '招标代理公司名称',
            },


            {
                name: '搜索词/订阅词',
            },
            {
                name: '项目编号',
            },
            {
                name: '招标联系人名称',
            },
            {
                name: '招标联系人电话',
            },
            {
                name: '中标联系人姓名',
            },
            {
                name: '中标联系人电话',
            },
            {
                name: '招标代理联系人姓名',
            },
            {
                name: '招标代理联系人电话',
            },
            {
                name: '中标候选人',
            },
            {
                name: '产品名称',
            },
            {
                name: '品牌',
            },
            {
                name: '数量',
            },
            {
                name: '型号',
            },
            {
                name: '单价',
            },
            {
                name: '总价',
            }
        ]
    }
]
import {
    complete,
} from "../../../../Api/complete/index.js";
const name = ref()
complete().then((res) => {
    // console.log(res.data.data[2].name);
    dialaLiss.forEach((item) => {
        res.data.data.forEach((item1) => {
            if (item.id == item1.id) {
                item.title = item1.name + "字段"
            }
        })
    });
});
let a
const dialactiveClick = (data) => {
    dial.value = data.id
    dialaIndex.value = data.id

}
let num = ref()
const handleChange = (value) => {
    console.log(value)
}

const handleClose = (done) => {
    done()
}

const Datallocations = () => {
    Datallocation().then(res => {
        if (signalsRadio1.biaoxuntotals < 2000) {
            num.value = signalsRadio1.biaoxuntotals
        } else {
            num.value = res.data.data.export_num
        }
    })
}

Datallocations()
onMounted(() => {
});

// 导出
const temp = ref([]);
let asd = []
const derivation = () => {
    if (max_num.value >= num.value) {
        
        logflg.value = true
        // const tokens = localStorage.getItem("token")
        let token
        userInfo().then(rex => {
            console.log(213123,rex)
            token = rex.data.data
            const today = new Date();
            const year = today.getFullYear();
            const month = today.getMonth() + 1;
            const day = today.getDate();
            const formattedDate = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
            // console.log(dial.value);
            if (dial.value != '' && token.level_id >= Number(dial.value)) {
                if (signalsRadio1.routerPush == 'search') {
                    if (signalsRadio1.id == '1') {
                        //等级
                        signalsRadio1.T_xijie = {
                            level_id: token.level_id,
                            type_level_id: dial.value,
                            export_num: num.value,
                            scroll_id: '',
                        }
                        console.log(signalsRadio1.T_xijie);
                        let list = {
                            ...signalsRadio1.title,
                            ...signalsRadio1.T_xijie,
                            ...signalsRadio1.count
                        }
                        list.level_id = token.level_id,
                            console.log(num.value);
                        // logflg.value = false
                        var num1 = Math.ceil(num.value / 1000)
                        Dataexportbx(list).then(res => {
                            if (res.data.code && res.data.code !== 1) {
                                ElMessage({
                                    showClose: true,
                                    message: '会员等级不足',
                                    type: 'warning',
                                })
                                logflg.value = false
                            }
                            else {
                                asd = res.data.data.list.data.concat(res.data.data.list.data)
                                res.data.data.list.data.forEach(item => {
                                    temp.value.push(item)
                                })
                                if (res.data.data.list.filed) {
                                    list.scroll_id = res.data.data.scroll_id
                                    for (let i = 0; i < num1 - 1; i++) {
                                        if (i == 1) {
                                            console.log("1");
                                        } else if (i == 2) {
                                            console.log("2");
                                        }
                                        Dataexportbx(list).then(res => {
                                            if (res.data.code && res.data.code !== 1) {
                                                ElMessage({
                                                    showClose: true,
                                                    message: '会员等级不足',
                                                    type: 'warning',
                                                })
                                                logflg.value = false
                                            }
                                            else {
                                                asd = res.data.data.list.data.concat(res.data.data.list.data)
                                                // temp.value.push(res.data.data.list.data)
                                                res.data.data.list.data.forEach(item => {
                                                    temp.value.push(item)
                                                })

                                                // temp.value = Array.from(new Set(temp.value))
                                                if (i == num1 - 2) {
                                                    exportCsv(temp.value)
                                                    logflg.value = false
                                                }


                                            }

                                        })
                                    }

                                }

                            }

                        })

                    }
                }

                if (signalsRadio1.routerPush == 'details') {
                    const daochu = JSON.parse(localStorage.getItem("daochu"));
                    const ditu = JSON.parse(localStorage.getItem("ditu"));
                    //等级
                    signalsRadio1.T_xijie = {
                        level_id: token.level_id,
                        type_level_id: dial.value,
                        export_num: num.value
                    }

                    let list = {
                        ...signalsRadio1.title,
                        ...signalsRadio1.T_xijie,
                        ...daochu,
                        ...ditu
                    }
                    Dataexportbx(list).then(res => {
                        downloadFileByBase64(res.data, 'application/vnd.ms-excel', `标讯${formattedDate}`);
                        logflg.value = false
                    })
                }
            } else {
                ElMessage({
                    showClose: true,
                    message: '会员等级不足',
                    type: 'warning',
                })
                logflg.value = false
                return
            }
        })

    } else {
        ElMessage({
            showClose: true,
            message: '导出条数不能大于最大条数',
            type: 'warning',
        })
    }


}
//最大导出数量
const max_num = ref()
allocation().then(res => {
    max_num.value = res.data.data.export_num
    num.value = res.data.data.export_num
    //  console.log(res.data.data);                
})

</script>

<style lang="scss" scoped>
.dialactive {
    border: 1px solid #6675FF !important;
}

.dialogBig {
    margin-top: 20px;

    .dialogBox {
        display: flex;
        justify-content: space-evenly;

        .dialogcont {
            width: 340px;
            height: 247px;
            padding: 20px 0 0 20px;
            background-color: #FFFFFF;
            border: 1px solid #DDDDDD;
            border-radius: 10px;

            .dialogtitle {
                display: flex;
                align-items: center;
                margin-bottom: 20px;

                .dialogSize {
                    font-size: 16px;
                    color: #333333;
                }
            }

            .dialogxinx {
                width: 300px;
                height: 153px;
                padding: 10px 10px 0;
                background-color: #F5F5F5;
                border-radius: 8px;
                display: flex;
                flex-wrap: wrap;
                overflow-y: scroll;

                .glory {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 10px;

                    .glorybt {
                        margin-right: 10px;
                        font-size: 12px;
                        color: #333333;
                    }

                    .glorynr {
                        margin-right: 10px;
                        font-size: 12px;
                        color: #8A919D;
                    }
                }
            }
        }
    }

    .dialogShuju {
        margin: 30px 0 0 43px;

        .dialogdc {
            margin-bottom: 20px;
            font-size: 18px;
            color: #333333;
        }

        .prompt0 {
            margin-left: 10px;
            font-size: 14px;
            color: #A9B1BE;
        }

        .prompt1 {
            margin-left: 20px;
            font-size: 14px;
            color: #A9B1BE;
        }
    }
}

.dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: 50px;

    .dialogbutton {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        height: 50px;
        background-color: #6675FF;
        border-radius: 4px;
        font-size: 18px;
        color: #FFFFFF;
        cursor: pointer;
    }
}


.dialog-footer {
    margin-top: 0px;
}

.el-progress {
    width: 150px;
    margin: 10px auto;
}
</style>